<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    #panel-content-container,
    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: cadetblue;
    }
  </style>
  <body>
    <div style="background-color: bisque" id="panel-content-container"></div>
    <div id="panel-script-container">
      <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
      <script>
        option = {
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%",
          },
          toolbox: {
            feature: {
              restore: {},
              saveAsImage: {},
            },
          },
          series: [
            {
              name: "业务指标",
              type: "gauge",
              detail: { formatter: "{value}%" },
              data: [{ value: 50, name: "完成率" }],
            },
          ],
        };
        option.series[0].data[0].value = 0;
        var myChart = echarts.init(document.getElementById('panel-content-container'));
        myChart.setOption(option);
      </script>
    </div>
  </body>
</html>
